<template>
  <div class="from_bc" v-if="data_from.Message"></div>
  <heead></heead>
  <left></left>
  <div class="post_select">
        <el-input
            v-model="datareas.searchname"
            class="w-50 m-2"
            size="large"
            placeholder="请输入用户名"
            :prefix-icon="Search"
        />
        <el-button class="pos_1" type="primary" v-on:click="handleQueryAll">搜索</el-button>
        <el-button class="pos_2"  type="success" v-on:click="add">添加</el-button>


    <el-table :data="data" stripe style="width: 540px">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="wxName" label="微信名" width="180" />
      <el-table-column prop="realName" label="真实姓名" width="180"/>
    </el-table>
  </div>

  <div v-if="data_from.Message" class="from_post">
    <div class="pos_3">
      <el-form :model="form" >
        <el-form-item label="微信姓名">
          <el-input v-model="data_from.wxname"/></el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="data_from.realname"/></el-form-item>
        <el-form-item label="请联系管理员提交照片"></el-form-item>
      </el-form>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button type="primary" @click="read">读卡</el-button>
        <el-button type="danger" @click="get_erro">取消</el-button>
      </el-form-item>
    </div>
  </div>


</template>

<script>
import axios from "axios";
import {onMounted, reactive, ref} from 'vue';
import Left from "@/components/left";
import Heead from "@/components/heead";


export default {
name: "index",
  components: { Heead, Left},
  setup(){
    const data = ref()
    const data_from = reactive({
      wxname:'',
      realname:'',
      Message:false,
    })
    const datareas = reactive({
      searchname:'',
      showToast:false,
      toastMessage:''
    })
    const handleQueryAll = () => {
      data_from.Message=false;
      axios.get("http://localhost:8090/rzall",{params:{
          realName:datareas.searchname
        }}).then((resp) =>{
          console.log(resp.data)
          data.value=resp.data.content;
      }).catch((err) => {
      })
    };
    const add = () => {
      data_from.Message=true;
    };
    const handleResetPassword = (message) => {
      datareas.showToast = true;
      datareas.toastMessage = message;
    };

    const get_erro=()=>{
      data_from.Message=false;
    };
    const onSubmit=()=>{
      if(data_from.realname && data_from.wxname){
        axios.post("http://localhost:8090/add",{
          realName:data_from.realname,
          wxName:data_from.wxname,
          zt:"未签到"
        }).then((resp)=>{
          console.log(resp);
          if(resp.data.success){
            alert("添加成功！！！")
          }else{
            alert("应该重复了?!")
          }
        }).catch((err)=>{
          alert("未知错误")
        })
      }else{
        alert("好像?...不完整啊哈哈哈哈")
      }
      };
    const read=()=>{
      if (data_from.wxname){
        axios.post("http://localhost:8090/read",{
          wxName:data_from.wxname,
        }).then((resp)=>{
          if(resp.data.success){
            alert("读卡器打卡失败")
          }else{
            alert("读卡器打卡失败")
          }
        }).catch((err)=>{})
            alert("网络错误")
      }else {
        alert("至少写上微信名字啦！")
      }


    };

    onMounted(() =>{
      handleQueryAll();
    });


    return {
      handleQueryAll,
      data,
      datareas,
      add,
      data_from,
      onSubmit,
      get_erro,
      read,
      handleResetPassword
    };
  }
}

</script>

<style scoped>

.post_select{
  position: absolute;
  top: 100px;
  left: 40%;
}
.pos_1{
  position: absolute;
  top: 5px;
  left: 550px;
}
.pos_2{
  position: absolute;
  top: 5px;
  left: 600px;
}
.from_post{
  width: 400px;
  height: 300px;
  background-color: white;
  z-index: 999;
  top: 18%;
  left: 45%;
  position: absolute;
}
.pos_3{
  top: 15%;
  left: 10%;
  position: absolute;
}
.from_bc{
  height: 100%;
  width: 100%;
  z-index: 2;
  opacity: 0.2;
  background-color: darkgray;
  border-radius: 20px 20px 20px 20px;
  position: absolute;
}


</style>